<template>
  <div>
    <el-row type="flex">
      <el-col :span="codeSpan" class="script-content">
        <ms-code-edit
          v-if="isCodeEditAlive"
          :mode="codeEditModeMap[jsr223Processor.scriptLanguage]"
          :read-only="isReadOnly"
          height="90%"
          :data.sync="jsr223Processor.script"
          theme="eclipse"
          :modes="['java', 'python']"
          ref="codeEdit" />
      </el-col>
      <div style="width: 14px; margin-right: 5px">
        <div style="height: 12px; width: 12px; line-height: 12px">
          <i
            :class="showMenu ? 'el-icon-remove-outline' : 'el-icon-circle-plus-outline'"
            class="show-menu"
            @click="switchMenu"></i>
        </div>
      </div>
      <el-col :span="menuSpan" style="width: 200px" class="script-index">
        <ms-dropdown
          :default-command.sync="jsr223Processor.scriptLanguage"
          :commands="languages"
          style="margin-bottom: 5px; margin-left: 15px"
          @command="languageChange" />
        <mock-script-nav-menu
          ref="scriptNavMenu"
          style="width: 90%"
          :language="jsr223Processor.scriptLanguage"
          :menus="baseCodeTemplates"
          @handleCode="handleCodeTemplate" />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import MsCodeEdit from '@/business/definition/components/MsCodeEdit';
import MsDropdown from '@/business/commons/MsDropdown';
import CustomFunctionRelate from '@/business/automation/scenario/common/function/CustomFunctionRelate';
import ApiFuncRelevance from '@/business/automation/scenario/common/function/ApiFuncRelevance';
import MockScriptNavMenu from '@/business/definition/components/mock/Components/MockScriptNavMenu';
import i18n from 'metersphere-frontend/src/i18n';

export default {
  name: 'MockApiScriptEditor',
  components: {
    MsDropdown,
    MsCodeEdit,
    CustomFunctionRelate,
    ApiFuncRelevance,
    MockScriptNavMenu,
  },
  data() {
    return {
      baseCodeTemplates: [],
      tcpCodeTemplates: [
        {
          title: this.$t('project.code_segment.code_segment'),
          children: [
            {
              title: this.$t('project.code_segment.insert_segment'),
              command: 'custom_function',
            },
          ],
        },
      ],
      isCodeEditAlive: true,
      languages: ['beanshell', 'python'],
      codeEditModeMap: {
        beanshell: 'java',
        python: 'python',
        groovy: 'java',
        nashornScript: 'javascript',
        rhinoScript: 'javascript',
      },
      codeSpan: 20,
      menuSpan: 4,
      showMenu: true,
    };
  },
  created() {
    if (this.jsr223Processor) {
      if (!this.jsr223Processor.scriptLanguage) {
        this.jsr223Processor.scriptLanguage = 'beanshell';
      }
    }
    if (this.showApi) {
      this.baseCodeTemplates = this.httpCodeTemplates;
    } else {
      this.baseCodeTemplates = this.tcpCodeTemplates;
    }
  },

  computed: {
    httpCodeTemplates() {
      let returnData = [
        {
          title: 'API' + this.$t('api_test.definition.document.request_info'),
          children: [
            {
              title: this.$t('api_test.request.address'),
              value: this.getScript('address'),
            },
            {
              title: 'Header ' + this.$t('api_test.definition.document.request_param'),
              value: this.getScript('header'),
            },
            {
              title: this.$t('api_test.request.body') + this.$t('api_test.variable'),
              value: this.getScript('body'),
            },
            {
              title: this.$t('api_test.request.body') + this.$t('api_test.variable') + ' (Raw)',
              value: this.getScript('bodyRaw'),
            },
            {
              title: this.$t('api_test.request.body') + this.$t('api_test.variable') + ' (Json)',
              value: this.getScript('body.json'),
            },
            {
              title: this.$t('api_test.request.body') + this.$t('api_test.variable') + ' (Xml)',
              value: this.getScript('body.xml'),
            },
            {
              title: 'Query ' + this.$t('api_test.definition.document.request_param'),
              value: this.getScript('query'),
            },
            {
              title: 'Rest ' + this.$t('api_test.definition.document.request_param'),
              value: this.getScript('rest'),
            },
          ],
        },
        {
          title: i18n.t('project.code_segment.custom_value'),
          children: [
            {
              title: i18n.t('api_test.request.processor.code_template_get_variable'),
              value: 'vars.get("variable_name");',
            },
            {
              title: i18n.t('api_test.request.processor.code_template_set_variable'),
              value: 'vars.put("variable_name", "variable_value");',
            },
          ],
        },
        {
          title: this.$t('project.code_segment.code_segment'),
          children: [
            {
              title: this.$t('project.code_segment.insert_segment'),
              command: 'custom_function',
            },
          ],
        },
      ];
      return returnData;
    },
  },
  props: {
    isReadOnly: {
      type: Boolean,
      default: false,
    },
    jsr223Processor: {
      type: Object,
    },
    showApi: {
      type: Boolean,
      default: true,
    },
    node: {},
  },
  watch: {
    jsr223Processor() {
      this.reload();
    },
    'jsr223Processor.scriptLanguage'() {
      if (this.showApi) {
        this.baseCodeTemplates = this.httpCodeTemplates;
      } else {
        this.baseCodeTemplates = this.tcpCodeTemplates;
      }
    },
  },
  methods: {
    getScript(type) {
      let returnScript = '';
      let laguanges = 'beanshell';
      if (this.jsr223Processor) {
        laguanges = this.jsr223Processor.scriptLanguage;
      }
      switch (type) {
        case 'address':
          if (laguanges === 'python') {
            returnScript = 'param=vars["address"]';
          } else {
            returnScript = 'var param=vars.get("address")';
          }
          break;
        case 'header':
          if (laguanges === 'python') {
            returnScript = 'param=vars["header.${param}"]';
          } else {
            returnScript = 'var param=vars.get("header.${param}")';
          }
          break;
        case 'body':
          if (laguanges === 'python') {
            returnScript = 'param=vars["body.${param}"]';
          } else {
            returnScript = 'var param=vars.get("body.${param}")';
          }
          break;
        case 'bodyRaw':
          if (laguanges === 'python') {
            returnScript = 'param=vars["bodyRaw"]';
          } else {
            returnScript = 'var param=vars.get("bodyRaw")';
          }
          break;
        case 'body.json':
          if (laguanges === 'python') {
            returnScript = 'param=vars["body.json"]';
          } else {
            returnScript = 'var param=vars.get("body.json")';
          }
          break;
        case 'body.xml':
          if (laguanges === 'python') {
            returnScript = 'param=vars["body.xml"]';
          } else {
            returnScript = 'var param=vars.get("body.xml")';
          }
          break;
        case 'query':
          if (laguanges === 'python') {
            returnScript = 'param=vars["query.${param}"]';
          } else {
            returnScript = 'var param=vars.get("query.${param}")';
          }
          break;
        case 'rest':
          if (laguanges === 'python') {
            returnScript = 'param=vars["rest.${param}"]';
          } else {
            returnScript = 'var param=vars.get("rest.${param}")';
          }
          break;
        default:
          break;
      }

      return returnScript;
    },
    addTemplate(template) {
      if (!this.jsr223Processor.script) {
        this.jsr223Processor.script = '';
      }
      this.jsr223Processor.script += template.value;
      if (this.jsr223Processor.scriptLanguage === 'beanshell') {
        this.jsr223Processor.script += ';';
      }
      this.reload();
    },
    reload() {
      this.isCodeEditAlive = false;
      this.$nextTick(() => (this.isCodeEditAlive = true));
    },
    languageChange(language) {
      this.jsr223Processor.scriptLanguage = language;
      this.$emit('languageChange');
    },
    addCustomFuncScript(script) {
      this.jsr223Processor.script = this.jsr223Processor.script
        ? this.jsr223Processor.script + '\n\n' + script
        : script;
      this.reload();
    },
    switchMenu() {
      this.showMenu = !this.showMenu;
      if (this.showMenu) {
        this.codeSpan = 20;
        this.menuSpan = 4;
      } else {
        this.codeSpan = 24;
        this.menuSpan = 0;
      }
    },
    handleCodeTemplate(code) {
      if (this.$refs.codeEdit) {
        this.$refs.codeEdit.insert(code);
      }
    },
  },
};
</script>

<style scoped>
.ace_editor {
  border-radius: 5px;
}

.script-content {
  /*height: calc(100vh - 570px);*/
  height: 185px;
  min-height: 170px;
}

.script-index {
  padding: 0 20px;
  width: 230px;
}

.template-title {
  margin-bottom: 5px;
  font-weight: bold;
  font-size: 15px;
}

.document-url {
  margin-top: 10px;
}

.instructions-icon {
  margin-left: 5px;
}

.ms-dropdown {
  margin-bottom: 20px;
}

.show-menu {
  text-align: center;
  font-weight: bold;
  color: #935aa1;
  font-size: 18px;
  cursor: pointer;
}

.show-menu:hover {
  color: #935aa1;
}
</style>
